<template>
    <MenuPage 
    :columns="projectCol" 
    :data="projectList"
    :total="proTotal"
    :page.sync="query.pageIndex"
    :size.sync="query.pageSize"
    @queryFun="getProjectList">
      <template slot="search">
        <Input
          v-model.trim="query.name"
          clearable
          @on-change="debounceSearch"
          enter-button="搜索"
          placeholder="应用名称"
        />
        <Button @click="refresh"><i class="el-icon-refresh-right"/></Button>
      </template>
    </MenuPage>
  </template>
  <script>
  import {debounce} from '@/libs/utils'
  import {
    getRefereeCtfReportList,
    getRefereeCtfTaskList
  } from '@/api/drill_compete.js';
  export default {
    components: {  },
    data() {
      return {
        // 工程列表
        query:{
            pageIndex:1,
            pageSize:10
        },
        projectList: [],
        proTotal: 0,
        projectCol: [
          {
            type:'link',
            title: '应用名称',
            key: 'name',
            minWidth: 120,
            placement: 'top-left',
            fun:this.toDetailPage
          },
          {
            title: '类型',
            key: 'type',
            width: 120,
            placement: 'top-left',
            filter:(type,data) => this.typeFilter(type,data)
          },
          {
            title: '工程名称',
            key: 'projectName',
            width: 180,
            tooltip: true
          },
          {
            title: '开始时间',
            key: 'startTime',
            width: 200,
            sortable: true, //开启排序
            sortType: 'desc' //初始化排序
          },
          {
            title: '结束时间',
            key: 'endTime',
            width: 200
          },
          {
            title: '创建者',
            key: 'creatorName',
            width: 100,
            tooltip: true
          }
        ]
      };
    },
    computed: {
      pageTitle () {
        //当前菜单显示名
        return this.$store.getters.pageTitle;
      },
      emergencyDefenseDrill () { // 应急
         return this.$store.getters.getMenuName('emergencyDefenseDrill');
      },
      awdDrill () { // 对抗
         return this.$store.getters.getMenuName('awdDrill');
      },
      stDrill () { // 渗透
        return this.$store.getters.getMenuName('stDrill');
      },
      multipleDrill () { // 综合
        return this.$store.getters.getMenuName('multipleDrill');
      },
      hwDrill () { // 实网
        return this.$store.getters.getMenuName('hwDrill');
      },
      swDrill () { // 旧护网
        return this.$store.getters.getMenuName('swDrill');
      },
      awdContest () { // 攻防
        return this.$store.getters.getMenuName('awdContest');
      },
      awdPlusContest () { // 攻防Plus
        return this.$store.getters.getMenuName('awdPlusContest');
      },
      ctfContest () { // 夺旗
        return this.$store.getters.getMenuName('ctfContest');
      },
      opContest () { // 运维
        return this.$store.getters.getMenuName('opContest');
      },
      kcContest () { // 知识
        return this.$store.getters.getMenuName('kcContest');
      },
      zcDrill () { // 众测
        return this.$store.getters.getMenuName('zcDrill');
      },
      fzDrill () { // 仿真
        return this.$store.getters.getMenuName('fzDrill');
      },
      dailyDrill () { // 日常
        return this.$store.getters.getMenuName('dailyDrill');
      },
      bigDrill(){ // 大型
        return this.$store.getters.getMenuName('bigDrill');
      },
    },
    created() {},
    watch: {
      
    },
    mounted() {
      this._query = {...this.query};
      // 调用工程列表
      this.getProjectList();
    },
    methods: {
      // 获取工程列表
      getProjectList() {
        getRefereeCtfTaskList(this.query)
          .then(({code,data,message}) => {
            if (code === 1) {
              this.projectList = data.items;
              this.proTotal = data.total;
            }
          })
          .catch((err) => {});
      },
      debounceSearch:debounce(function(val) {
        this.query.pageIndex = 1;
        this.getProjectList();
      },500),
      refresh() {
        this.query = {...this._query};
        this.getProjectList();
      },
      // 获取团队或者是目标的名称
      sceneStatusFilter(val) {
        switch (val) {
          case 'error':
            return '已停止';
          case 'initialized':
            return '初始化';
          case 'running':
            return '运行中';
          case 'completed':
            return '已完成';
          default:
            return '未知状态';
        }
      },
      // 设置工程状态颜色
      setColor(status) {
        let obj = {
          color: '',
          text: ''
        };
        switch (status) {
          case 0: // 未部署
            obj.color = '#888';
            obj.text = '未部署';
            return obj;
            break;
          case 3: // 部署成功
            obj.color = '#06b649';
            obj.text = '部署成功';
            return obj;
            break;
          case 4: // 删除中
            obj.color = '#ff4242';
            obj.text = '删除中';
            return obj;
            break;
          case 6: // '部署失败'
            obj.color = '#ff4242';
            obj.text = '部署失败';
            return obj;
            break;
          case 8: // '删除失败'
            obj.color = '#fa9901';
            obj.text = '删除失败';
            return obj;
            break;
          case 9: // '部署中'
            obj.color = '#06b649';
            obj.text = '部署中';
            return obj;
            break;
          case 12: // '待删除'
            obj.color = '#888';
            obj.text = '待删除';
            return obj;
            break;
          case 13: // '清空部署中'
            obj.color = '#ff8244';
            obj.text = '清空部署中';
            return obj;
            break;
          case 14: // '清空部署失败'
            obj.color = '#ff8244';
            obj.text = '清空部署失败';
            return obj;
            break;
          case 16: // '工程导入中'
            obj.color = '#088cf0';
            obj.text = '工程导入中';
            return obj;
            break;
          case 17: // '工程导入失败'
            obj.color = '#cb0236';
            obj.text = '工程导入失败';
            return obj;
            break;
        }
      },
      // 任务列表
      toDetailPage(row) {
        this.$router.push({
          name: 'refereeCtfDetail',
          query: {
            sceneName: row.name,
            sceneId: row.id,
            projectId: row.projectid,
            projectName: row.projectname,
            projectType:this.typeFilter(row.type,row)
          }
        });
      },
      typeFilter (val,item) {
        //0.对抗演练、1.攻防赛、2夺旗赛、3知识赛、4渗透演练
        let str = '';
        switch (val.toString()) {
          case '0':
            // str = '对抗演练';
            str = this.awdDrill;
            break;
          case '1':
            // str = '攻防赛';
            str = this.awdContest;
            break;
          case '2':
            // str = '夺旗赛';
            str = this.ctfContest;
            break;
          case '3':
            // str = '知识赛';
            str = this.kcContest;
            break;
          case '4':
            // str = '渗透演练';
            str = this.stDrill;
            break;
          case '5':
            // str = '护网演练';
              const extension = JSON.parse( item.extension)
              if(extension.hwType==0&&extension.hwExtentionType==2){
                str = this.dailyDrill
              }else if(extension.hwType==0&&extension.hwExtentionType==3){
                str = this.bigDrill
              }else if(extension.hwType==2&&extension.vpn){
                str = this.zcDrill
              }else if(extension.hwType==1){
                str = this.hwDrill;
              }else if(extension.hwType == 3){
                str = this.fzDrill;
              } else{
                str = this.swDrill;
              }
            break;
          case '6':
            // str = '应急防御演练';
            str = this.emergencyDefenseDrill;
            break;
          case '7':
            // str = '综合演练';
            str = this.multipleDrill;
            break;
          case '8':
            // str = '攻防赛Plus';
            str = this.awdPlusContest;
            break;
          case '9':
            // str = '运维赛';
            str = this.opContest;
            break;
          case '10':
            // str = '应急防御演练';
            str = this.emergencyDefenseDrill;
            break;
          default:
            break;
        }
        return str;
      }
    }
  };
  </script>
  <style scoped>
  </style>
  